<template>
    <div id="myOrderItem">
        <div class="item-box">
        <div class="itemTop">
            <van-cell  style="font-size:12px;" :title="`订单号：${order.uuid}`" :value="order.status"></van-cell>
        </div>
        <div class="itemCenter">
            <div class="centerLeft">
                <!-- eslint-disable-next-line vue/no-unused-vars, vue/require-v-for-key -->
                <img v-for="(good, index) in order.goodsList.slice(0, 2)" :src="img+good.img" alt="" style="width: 90px;height:90px;border-radius:10px;" >
<!--                <van-button v-show ="order.status === '待支付'|| order.status === '待发货'" class="itemBottom1" size="mini" type="danger" @click="changeShow" >修改地址</van-button>-->
<!--                <van-button class="itemBottom2" type="info" size="mini" @click="entryOrder(order.uuid,order.status)">查看详情</van-button>-->
            </div>
            <div class="centerRight"></div>
        </div>
        <div class="itemBottom">
            <van-row type="flex" justify="space-around">
                <van-col  offset="1" span="10" v-if ="order.status === '待支付'|| order.status === '待发货'">
                     <van-count-down  :time="nowTime" :format="order.status === '待支付'?'HH:mm:ss':'DD天HH时mm分ss秒'" style="margin-top:7px;" @change="cancel"/>
                </van-col>
                <van-col offset="1" span="12">
            <van-cell :value="`共${goodsNum}份商品 需付款¥${order.totalPrice}`" style="font-size:10px;"></van-cell>
                </van-col>
            </van-row>
        </div>
            <div  style="margin-top: 10px">
                <van-row type="flex" justify="space-around">
                    <van-col offset="11" span="5">
                        <van-button  round color="black" hairline  plain v-show ="order.status === '待支付'|| order.status === '待发货'" class="itemBottom1" size="small" type="danger" @click="changeShow" >修改地址</van-button>
                        <van-button  round color="black" hairline  plain v-show ="order.status === '待评价'" class="itemBottom1" size="small" type="danger" >评价</van-button>
                    </van-col>
                    <van-col span="5">
                        <van-button  round color="rgb(254, 78, 17)" hairline  plain  v-show ="order.status === '待支付'" class="itemBottom2" type="info" size="small" @click="entryOrder(order.uuid,order.status)" style="margin-right: 10px">继续付款</van-button>
                        <van-button  round color="rgb(254, 78, 17)" hairline  plain  v-show ="order.status === '待评价'" class="itemBottom2" type="info" size="small"  style="margin-right: 10px">退款</van-button>
                    </van-col>
                </van-row>
            </div>


        </div>
        <van-popup v-model="show"  position="bottom" :style="{ height: '90%' }" closeable @close="clearList">
            <div class="address-wrap" >
                <div class="address">
                  <span>送至 </span>
                  <span>{{ address.region }}</span>
                </div>
              <div class="address">
                <span>{{ address.detailed_address }}</span>
              </div>
                <div class="name" >
                    <span>接收人 </span>
                    <span>{{ address.username }} </span>
                    <span>{{ address.phone }}</span>
                </div>
                <van-button class="arrow" plain type="primary" @click="onClickRight(order.uuid)">修改</van-button>
            </div>
            <div class="address-list">
                <van-address-list
                        v-model="chosenAddressId"
                        :list="list"
                        default-tag-text="默认"
                        @add="onAdd"
                        @edit="onEdit"
                        @select="giveAddress"
                />
            </div>
        </van-popup>
    </div>
</template>

<script>
let toStop = -1;
import img, {cancelOrders, getAllOrder, getOrderAddress, updateAddress, userAddressList} from "@/api/api"
    import {mapMutations} from "vuex";
    import {Toast} from "vant";
    export default {
        name: "MineOrderItem",
        props:['order'],
        created() {
          getAllOrder(2).then(
              (resp)=>{
                if(resp.data.code === 2000){
                  let tempOrder = resp.data.data.order;
                  tempOrder.forEach((item, index) => {
                    if(item.uuid === this.order.uuid){
                      this.createTime = item.createTime;
                      if(new Date().getTime() - new Date(this.createTime).getTime() >= 15*60*1000){
                        cancelOrders(this.order.uuid).then(
                            (resp) => {
                              if (resp.data.code === 2000) {
                                location.reload()
                              } else {
                                Toast(resp.data.message);
                              }
                            })
                      }
                    }
                  })
                }else{
                  Toast(resp.data.message)
                }
              }
          )
        },
      data(){
            return{
                time: this.order.status === '待支付'? 15  * 60 * 1000:3 * 24 * 60 * 60 * 1000,
                img:img.src,
                show:false,
                chosenAddressId: '1',
                list: [],
                chosenItem:{},
                address:{},
                createTime:""
            }
        },
        methods:{
            reload () {
                this.show = false;
                this.$nextTick(() => {
                    this.show = true;
                })
            },
            entryOrder(uuid,status){
                if (status === '待支付' ){
                    this.$router.push({path: '/payStatus',query:{uuid:uuid,goodsList:this.order.goodsList}})
                }else if (status === '发货中'){
                    this.$router.push({path: '/checkOrder',query:{uuid:uuid,goodsList:this.order.goodsList,status:status}})
                }else if (status === '待发货'){
                    this.$router.push({path: '/checkOrder',query:{uuid:uuid,goodsList:this.order.goodsList,status:status}})
                }
            },
            changeShow(){
                this.show = true;
                this.list = [];
                getOrderAddress(this.order.uuid).then((response) => {
                  if(response.data.code === 2000){
                    this.address  = response.data.data;
                    console.log(this.address)
                  }else{
                    Toast(response.data.message);
                  }
                });
                userAddressList().then((response) => {
                    let tempList = response.data.data.address;
                    for(let i = 0; i < tempList.length;i++){
                        let ads1 = {
                            id: "",
                            name: "",
                            tel: "",
                            address:"",
                            zipCode:"",
                            isDefault: true,
                            addressesId:0,
                        };
                        ads1.id = tempList[i].id;
                        ads1.name = tempList[i].addName;
                        ads1.tel = tempList[i].phone;
                        ads1.zipCode = tempList[i].zipCode;
                        ads1.address = tempList[i].region+"\n"+tempList[i].detailedAddress;
                        ads1.isDefault = tempList[i].isDefault === '1';
                        ads1.areaCode = tempList[i].areaCode
                        this.list.push(ads1);
                    }
                });
            },
            ...mapMutations(["saveChosenAddress"]),
            onAdd() {
                this.$router.push({
                    path: '/dashboard/addAddress',
                })
            },
            onEdit(item, index) {
                this.$router.push({
                    path: '/dashboard/editAddress',
                    query: {
                        id: item.id,
                        name:item.name,
                        tel:item.tel,
                        zipCode:item.zipCode,
                        detailedAddress:item.address.split('\n')[1],
                        isDefault:item.isDefault,
                        areaCode:item.areaCode
                    }
                })
            },
            onClickRight(uuid) {
                if(this.chosenItem.id === undefined){
                    Toast('请选中地址')
                }else{
                    updateAddress(uuid,this.chosenItem.id).then((response) => {
                       if(response.data.code==2000){
                           Toast("修改成功");
                           console.log(this.chosenItem)
                           this.saveChosenAddress(this.chosenItem);
                           let newAddress = {
                             detailed_address:this.chosenItem.address.split('\n')[1],
                             phone:this.chosenItem.tel,
                             region:this.chosenItem.address.split('\n')[0],
                             username:this.chosenItem.name
                           }
                           this.address = newAddress;
                           this.reload();
                       }else{
                           Toast("修改失败");
                       }
                    })

                }
            },
            giveAddress(item, index){
                this.chosenItem = item;
            },
            clearList(){
                this.show = false;
            },
          cancel(val){
            if(val.hours+val.minutes+val.seconds >0){
              toStop = 1;
            }
            if(val.hours+val.minutes+val.seconds === 0){
              toStop = toStop-1;
              if(toStop === 0){
                cancelOrders(this.order.uuid).then(
                    (resp) => {
                      if (resp.data.code === 2000) {
                        location.reload()
                      } else {
                        Toast(resp.data.message);
                      }
                    })
              }
            }

          }
        },
      computed:{
        //1、倒计时流去时间
        sendTime() {
          let dateStr = this.createTime;
          let before = new Date(dateStr);
          let now = new Date();
          let result = now.getTime() - before.getTime();
          return result;
        },
        nowTime(){
          return this.time-this.sendTime>0?this.time-this.sendTime:0;
        },
          goodsNum(){
            let result = 0;
            if(this.order.goodsList!==undefined && this.order.goodsList.length > 0){
              this.order.goodsList.forEach((goods,index)=>{
                result += goods.count;
              })
            }
            return result;
          }
      },
      destroyed() {
          toStop = -1;
      }
    }
</script>

<style scoped>
    #myOrderItem {
        width: 100%;
        height:200px;
        /*border: 1px solid #e0e0e0;*/
        display: flex;
        flex-direction: column;
        font-size: 0.7rem;
        /*margin: 0.6rem 0;*/
        /*margin: 0.5rem 0;*/
        margin-bottom:25px;
        /*margin-top: 10px;*/
    }


    /*#myOrderItem .itemTop {*/
    /*    flex: 1;*/
    /*}*/

    #myOrderItem .itemCenter{
        display: flex;
        flex-direction: row;
        align-items: center;
        /*background-color:#e0e0e0;*/
        flex: 2;
        width: 95%;
        margin-left: auto;
        margin-right: auto;
        border-radius:10px;
        /*border: 1px solid black;*/
        /*height: 120px;*/
    }

    /*#myOrderItem .itemCenter .centerLeft{*/
    /*    flex: 9;*/
    /*}*/

    /*#myOrderItem .itemCenter .centerRight{*/
    /*    flex: 1;*/
    /*}*/

    #myOrderItem .itemCenter .centerLeft img{
        width: 3.0rem;
        margin: 0.5rem 0.3rem;
    }

    /*#myOrderItem .itemBottom{*/
    /*    flex: 1;*/
    /*}*/

    .itemCenter {
        position: relative;
    }
    /*.itemBottom2 {*/
    /*    position: absolute;*/
    /*    bottom: 47px;*/
    /*    right:5px;*/
    /*}*/
    /*.itemBottom2 {*/
    /*    margin-right:10px;*/
    /*    right: 70px;*/
    /*}*/
    .address-wrap {
        margin-bottom: 20px;
        background: #fff;
        position: relative;
        font-size: 14px;
        padding: 15px;
        color: #222333;
    }
    .address-wrap  .name, .address {
        margin: 10px 0;
    }
    .arrow {
        position: absolute;
        right: 60px;
        top: 40%;
        transform: translateY(-50%);
        font-size: 14px;
        height: 30px;
    }
    .address-wrap::before {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: 2px;
        background: -webkit-repeating-linear-gradient(135deg, #76DA96 0, #76DA96 20%, transparent 0, transparent 25%, #c2e9fb 0, #c2e9fb 45%, transparent 0, transparent 50%);
        background: repeating-linear-gradient(-45deg, #76DA96 0,#76DA96 20%, transparent 0, transparent 25%, #c2e9fb 0, #c2e9fb 45%, transparent 0, transparent 50%);
        background-size: 80px;
        content: '';
    }
    .address-list{
        height:70%;
        overflow:auto;
    }
   /deep/ .van-cell {
        position: relative;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        box-sizing: border-box;
        width: 100%;
        padding: 3px 16px;
        overflow: hidden;
        color: #323233;
        font-size: 14px;
        line-height: 24px;
        background-color: #fff;
    }
</style>
